<template>
	<view>
		<view class="uni-status-bar" style="background: #fff;"></view>
		<view class="contain">
			<view class="hb-header">
				<view class="left">
					<view class="uni-page-head-btn"><i class="uni-btn-icon" style="color: rgb(0, 0, 0); font-size: 27px;"  @click="back"></i></view>
				</view>
				<view class="title">{{$t('my.charge')}}</view>
				<view class="right" @click="onNative">
				   {{$t('my.charge.record')}}
				</view>
			</view>
			<view class="charge-money">
				<view class="bgF forms">
					<view style="line-height: 20px;text-align: center;">{{coin}}</view>
				</view>
				<view class="qr-code-content bgF">
					<view class="type">{{$t('info.chainType')}}：<text>Polygon</text></view>
					<tki-qrcode :val="address" :onval="true" class="qr-code" :loadMake="true"></tki-qrcode>
					<view class="address-wrap">
						<text class="address-label">{{$t('my.charge.address')}}</text>
						<text class="address-text">{{address}}</text>
					</view>
					<view class="buttonBg" @click="addressCopy(address)">{{$t('my.charge.copyAddress')}}</view>
				</view>
				<view class="tips">
					<view>
						{{$t('info.reminder')}}:<br>
						{{$t('my.charge.USDTip')}}。
					</view>
				</view>
				<text class="warm-prompt">{{$t('my.charge.tips')}}。</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addressCoin
	} from '@/api/wallet';
	import TkiQrcode from "@/components/tki-qrcode/tki-qrcode";
	export default {
		name: "index",
		components: {
			TkiQrcode
		},
		data() {
			return {
				address: '',
				isBottomShow: false,
				height: 400,
				coin: '',
				configs:{
					deposit_coins:['USDT']
				}
			}
		},
		computed: {
			
		},
		onShow() {

		},
		onLoad(e) {
			this.coin = e.coin
		},
		created() {
			this.getAddressCoin(this.coin);
		},
		methods: {
			back(){
				uni.navigateBack({
				  delta: 1
				});
			},
			onNative(){
				uni.navigateTo({
					url:"/pages/my/charge-money/top-ups-record?coin="+this.coin
				})
			},
			getAddressCoin(e) {
			    var time = Math.round(new Date().getTime()/1000);
				var data = {
					coin:e,
					time:time
				}
				addressCoin(data).then((res) => {
					this.address = res.data;
				})
			},
			addressCopy(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						uni.showToast({
							icon: 'success',
							title:this.$t('my.copyS')
						})
					},
					fail: function() {
						uni.showToast({
							icon: 'none',
							title:this.$t('my.copyF')
						})
					}
				});
			},
			selectCoin(e) {
				this.coin = this.configs.deposit_coins[e.detail.value];
				this.getAddressCoin(this.coin);
				this.isBottomShow = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.contain{
		min-height: 100vh;
		background-color: $hb-bg;
	}
	.hb-header{
		background: #fff;
	}
	.hb-header .right{
		color: $hb-primary-color;
	}
	page {
		background: $hb-bg;
	}
    .bgF{
		background: #fff;
	}
	.buttonBg {
		width: 100%;
		height: 86rpx;
		background:$hb-primary-color;
		background-size: cover;
		color: #fff;
		text-align: center;
		line-height: 86rpx;
	}
    .forms{
		margin: 20rpx 0;
		margin-bottom: 0;
		color: rgba(242, 160, 73, 1);
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0px 4px 10px rgba(49, 49, 51, 0.08);
	}
	.charge-money {
		box-sizing: border-box;
		min-height: 100%;
		background: $hb-bg;
		padding: 20rpx;
		padding-bottom: 60rpx;
		overflow: hidden;

		.select-coin-wrap {
			width: 100%;
			position: relative;
			height: 100rpx;

			.select-coin-content {
				position: absolute;
				box-sizing: border-box;
				padding: 0 20rpx;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&-right {
					display: flex;
					align-items: center;
					color: rgba(122, 130, 172, 1);
				}

				.select-coin {
					font-size: 32rpx;
					color: rgba(122, 130, 172, 1);
				}

				.select-fun-text {
					font-size: 32rpx;
					font-weight: 400;
					color: rgba(122, 130, 172, 1);
				}
			}
		}

		.qr-code-content {
			margin-top: 20rpx;
			padding: 58rpx 20rpx;
			align-items: center;
			border-radius: 8rpx;
            .type{
            	margin-bottom:40rpx;
            	display:flex;
            	align-items: center;
            	text{
            		display:inline-block;
            		padding:6rpx 10rpx;
            		border:1px solid $hb-primary-color;
            		border-radius:6rpx;
            		color: $hb-primary-color;
            	}
            }
			.address-wrap {
				text-align: center;

				.address-label {
					display: block;
					font-size: 24rpx;
					color: $hb-text-color;
					margin-bottom: 10rpx;
				}

				.address-text {
					font-size: 26rpx;
					color: $hb-text-color
				}
			}
		}

		.warm-prompt {
			display: block;
			font-size: 22rpx;
			margin-top: 30rpx;
			color: rgba(255, 255, 255, 0.2)
		}
	}

	.tips {
		font-size: 26rpx;
		color: #999;
		margin-top: 40rpx;
		line-height: 40rpx;
	}
</style>
